import React from 'react';
import { connect } from 'react-redux';
import { Tooltip, Button, Tag } from 'antd';
import { getFeildByTreeData } from '../../../utils/utils';
import CommonList from '../../../components/CommonLists/list';

@connect(mapStateToProps)
class ProjectList extends CommonList {
  constructor(props) {
    super(props);
    this.api = 'project';
    this.operatorWidth = '280px';

    this.editButton = (record) => {
      return (
        <Button size='small' type='link' onClick={this.edit.bind(this, record, { title: '编辑项目' })}>
          编辑
        </Button>
      );
    };
    this.strategyButton = (record) => {
      return (
        <Button
          size='small'
          type='link'
          onClick={() => {
            this.props.history.push({ pathname: '/strategy/config/index', state: { name: record.name } });
          }}
        >
          策略管理
        </Button>
      );
    };
    this.componentButton = (record) => {
      return (
        <Button
          size='small'
          type='link'
          onClick={() => {
            this.props.history.push({ pathname: '/strategy/component/index', state: { name: record.name } });
          }}
        >
          组件管理
        </Button>
      );
    };
    this.variableButton = (record) => {
      return (
        <Button
          size='small'
          type='link'
          onClick={() => {
            this.props.history.push({ pathname: '/variable/var', state: { name: record.name } });
          }}
        >
          变量管理
        </Button>
      );
    };
    this.btnGroup = [this.editButton, this.strategyButton, this.componentButton, this.variableButton, this.delButton];

    this.columns = [
      {
        title: '所属机构',
        dataIndex: 'orgCode',
        key: 'orgCode',
        ellipsis: true,
        render: (text) => {
          const name = getFeildByTreeData({
            tree: this.props.orgList,
            souceVal: text,
          }).name;
          return (
            <Tooltip title={name} placement='topLeft'>
              <div style={{ minWidth: '140px' }}>{name}</div>
            </Tooltip>
          );
        },
      },
      {
        title: '项目名称',
        key: 'name',
        dataIndex: 'name',
        ellipsis: true,
        render: (text) => {
          return (
            <Tooltip title={text} placement='topLeft'>
              <div style={{ minWidth: '120px' }}>{text}</div>
            </Tooltip>
          );
        },
      },
      {
        title: '项目code',
        dataIndex: 'code',
        key: 'code',
        ellipsis: true,
        render: (text) => {
          return (
            <Tooltip title={text} placement='topLeft'>
              <div style={{ minWidth: '130px' }}>{text}</div>
            </Tooltip>
          );
        },
      },
      {
        title: '策略数',
        dataIndex: 'strategyNumber',
        width: 120,
        key: 'strategyNumber',
        ellipsis: true,
        render: (text, record) => {
          return (
            <Button
              type='link'
              onClick={() => {
                this.props.history.push({ pathname: '/strategy/config/index', state: { name: record.name } });
              }}
            >
              {text}
            </Button>
          );
        },
      },
      {
        title: '组件数',
        dataIndex: 'componentNumber',
        width: 120,
        key: 'componentNumber',
        ellipsis: true,
        render: (text, record) => {
          return (
            <Button
              type='link'
              onClick={() => {
                this.props.history.push({ pathname: '/strategy/component/index', state: { name: record.name } });
              }}
            >
              {text}
            </Button>
          );
        },
      },
      {
        title: '可见权限',
        dataIndex: 'visibleOrg',
        key: 'visibleOrg',
        ellipsis: true,
        width: '140px',
        render: (text) => {
          return <Tag color='#2db7f5'>{text === -1 ? '所有机构可见' : `${text}个机构可见`}</Tag>;
        },
      },
      {
        title: '修改时间',
        dataIndex: 'updateAt',
        key: 'updateAt',
        ellipsis: true,
        render: (text) => {
          return (
            <Tooltip title={text} placement='topLeft'>
              <div style={{ minWidth: '150px' }}>{text}</div>
            </Tooltip>
          );
        },
      },
      {
        title: '创建/修改人',
        dataIndex: 'createBy',
        key: 'createBy',
        ellipsis: true,
        render: (text, record) => {
          var content = !!record.createBy
            ? `${record.createBy}/${record.updateBy}`
            : `${record.createBy}/${record.updateBy}`;
          return (
            <Tooltip title={content} placement='topLeft'>
              <div style={{ minWidth: '150px' }}>{content}</div>
            </Tooltip>
          );
        },
      },
    ];
  }
}

function mapStateToProps(state) {
  return {
    orgList: state.global.orgList,
  };
}

export default ProjectList;
